<template>
  <el-container class="layout-container-demo" style="height:100vh">
    <el-aside width="240px">
      <el-scrollbar  style="background-color: rgba(10, 6, 50, 1);">
        <div class="aside-header">
          <el-image :src="apps.icon" class="logo-image" />
          <h1 class="logo-title">{{apps.name}}</h1>
        </div>
        <div class="menu_root" v-for="(menu,index) in menuList" :key="index">
          <div class="menu_root__name">
            <span class="menu-title">{{menu.rootNodeName}}</span>
          </div>
          <div  v-for="(item,k) in menu.nodes">
            <div @click="goto(item.path)" :class="currentRouter == item.path ? 'menu_root__item menu_root__item__select' : 'menu_root__item'">
              <div class="menu_root__item__icon">
                <el-icon>
                  <component :is="item.icon"></component>
                </el-icon>
              </div>
              <span class="menu_root__item__name">{{item.name}}</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header class="main-header">
        <div class="toolbar">
          <a href="/consume" target="_blank" class="portal-link">
            <el-icon><Monitor /></el-icon>
            <span>前往用户端</span>
          </a>
          <el-dropdown>
            <span class="user-dropdown">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>{{ username }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goout">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main-content">
        <router-view style="height: 100%;" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import apps from '@/config/application.js'
import {onBeforeMount, ref} from 'vue'
import { useRouter } from 'vue-router'
import http from "@/util/http-util.js";
const router = useRouter()
const username = ref('')

const currentRouter = ref('')

const goto = (url)=>{
  router.push(url);
  currentRouter.value = url;
}
currentRouter.value = router.currentRoute.value.fullPath;
const menuList = ref([
  {
    rootNodeName:'自习室管理',
    nodes:[
      {
        name:'自习室',
        path:'/room',
        icon:'OfficeBuilding'
      },
    ]
  },
  {
    rootNodeName: '公告管理',
    nodes: [
      {
        name: '公告列表',
        path: '/notice-list',
        icon:'Guide'
      },
    ]
  },
  {
    rootNodeName:'系统管理',
    nodes:[
      {
        name:'轮播图管理',
        path:'/banner',
        icon:'Picture'
      },
      {
        name:'用户列表',
        path:'/alltheinfo',
        icon:'Avatar'
      },
    ]
  }
])
onBeforeMount(()=>{
  http.GET("/getUser").then((res) => {
    console.log(res)
    username.value=res.data.username;
  })

})

const goout =async ()=>{
  http.logout();
  router.push("/")
}
const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
.layout-container-demo {
  background-color: aliceblue;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.aside-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: rgba(36, 6, 231, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}

.logo-image {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.logo-title {
  margin: 0 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.menu_root {
  padding: 0 16px;
}

.menu_root__name {
  padding: 12px 0;
  margin-top: 8px;
}

.menu-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu_root__item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 4px 0;
  border-radius: 8px;
  transition: all 0.3s;
  color: rgb(222, 221, 231);
}

.menu_root__item:hover {
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
}

.menu_root__item__select {
  background: rgba(7, 66, 244, 1) !important;
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 1, 23, 0.2);
}

.menu_root__item__select .menu_root__item__icon {
  background: rgba(2, 15, 27, 0.4);
}

.menu_root__item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-right: 12px;
  background: rgba(91, 88, 88, 0.5);
}

.menu_root__item__name {
  font-size: 14px;
  font-weight: 500;
}

.main-header {
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.portal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #409EFF;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s;
}

.portal-link:hover {
  background: rgba(64, 158, 255, 0.1);
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

.user-dropdown:hover {
  background: rgba(0, 0, 0, 0.05);
}

.main-content {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  margin: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-scrollbar) {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>